<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/res/layui/css/layui.css">
  <script type="text/javascript" src="/res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="/index">首页</a>
      </p>
      <div class="sn-quick-menu">
        <div>
          <li class="layui-nav-item" lay-unselect="">
            <div id="">
              <div style="margin-right: 5px">
                <img id="userImg" th:if="${session.userImg != null}"  th:src="${session.userImg}"  class="layui-nav-img">
              </div>
              <div id="username" style="color: crimson;margin-right: 6px;font-size: 24px" th:text="${session.userName}"></div>

            </div>
            <!--<dl class="layui-nav-child">-->
            <!--<dd><a href="javascript:;">修改信息</a></dd>-->
            <!--<dd><a href="javascript:;">安全管理</a></dd>-->
            <!--<dd><a href="javascript:;">退了</a></dd>-->
            <!--</dl>-->
          </li>
        </div>
        <div class="login"><a href="/login.html"><p th:text="${session.userName!=null?'':'登录'}"></p>&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color:coral;margin-right: 6px;font-size: 15px" href="/myself">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color: coral;margin-right: 6px;font-size: 15px" href="/showShopCart">购物车</a><span th:text="${size}"></span></div>
        <div class="sp-cart myorder"><a href="/showOrder">&nbsp;&nbsp;&nbsp;我的订单</a></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="/index" title="母婴商城">
            <img src="/res/static/img/logo.png">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="/goodsController/indexSearch" class="layui-form" novalidate method="post"  >
            <input type="text" name="content" required  lay-verify="required"  autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo" type="submit">
              <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base datails-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="/show" class="active">所有商品</a>
            <a href="/bulk">今日折扣</a>
            <a href="information.html">母婴资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="data-cont-wrap w1200">
      <div class="crumb">
        <a href="javascript:;">首页</a>
        <span>></span>
        <a href="javascript:;">所有商品</a>
        <span>></span>
        <a href="javascript:;">产品详情</a>
      </div>
      <div class="product-intro layui-clear">
        <div class="preview-wrap">
          <a href="javascript:;">
              <img th:src="${goods.consultImgUrl}" style="width: 400px;height: 400px; ">
              </a>
        </div>
        <div class="itemInfo-wrap">
          <div class="itemInfo">
            <div class="title">
              <h4 th:text="${goods.goodsName}"></h4>
              <span><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>
            </div>
            <div class="summary">
              <p class="reference"><span>参考价</span> <del>￥280.00</del></p>
              <p class="activity"><span>活动价</span><strong class="price" th:text="${goods.price}"><i>￥</i>99.00</strong></p>
              <p class="address-box"><span>送&nbsp;&nbsp;&nbsp;&nbsp;至</span><strong class="address">江西&nbsp;&nbsp;南昌&nbsp;&nbsp;东湖区</strong></p>
            </div>
            <div class="choose-attrs">
                <div>
                    <div class="color layui-clear" th:each="attribute:${attributes}">
                        <span th:text="${attribute.key}" class="title"></span>
                        <div class="color-cont" th:classappend="'attr'+${attributeStat.index}"  th:each="value:${attribute.value}">
                            <span class="btn" th:classappend="'mybtn'+${attributeStat.index}" th:text="${value}" onclick="selected(this)"> </span>
                        </div>
                    </div>
                </div>

              <div class="number layui-clear"><span class="title">数&nbsp;&nbsp;&nbsp;&nbsp;量</span><div class="number-cont"><span class="cut btn">-</span><input id="num" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" maxlength="4" type="" name="" value="1"><span class="add btn">+</span></div></div>
            </div>
            <div class="choose-btns">
              <button class="layui-btn layui-btn-primary purchase-btn" onclick="pay()">立刻购买</button>
              <button class="layui-btn  layui-btn-danger car-btn" onclick="addShopCart()"><i class="layui-icon layui-icon-cart-simple"></i>加入购物车</button>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-clear">
        <div class="aside">
          <h4>热销推荐</h4>
          <div class="item-list" th:each="hot:${hotGoods}">


            <div class="item" style="width: 280px;height: 300px" >
              <a th:href="@{/details(id=${hot.goodsId})}"><img style="width: 280px;height: 280px" th:src="${hot.consultImgUrl}" ></a>
              <p><h5  style="display: block;height: 20px ;color: lightpink" th:text="${hot.goodsName}"></h5><span class="pric" th:text="${hot.price}"></span></p>
            </div>


          </div>
        </div>
        <div class="detail">
          <h4>详情</h4>
          <div class="item">
              <div th:text="${goods.goodsDescribe}"></div>
            <div style="width: 800px;" th:each="img:${imgs}">
                <img th:src="${img}" width="100%">
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript">
    window.onload = function (){
        layui.use(['jquery'], function(jquery) {
            var $ = layui.jquery;
            for (let i = 0; i < 5; i++) {
                $(".attr"+i+" > span:first").addClass("active");
            }
        });
    }
    layui.config({
    base: '/res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','jquery'],function(){
      var mm = layui.mm;
      var $ = layui.$;
      var cur = $('.number-cont input').val();
      $('.number-cont .btn').on('click',function(){
        if($(this).hasClass('add')){
          cur++;
         
        }else{
          if(cur > 1){
            cur--;
          }  
        }
        $('.number-cont input').val(cur)
      })

      
  });

  //谢安建
  //加入购物车
  function addShopCart(){
      layui.use(['jquery','layer'],function (jquery) {
          var $ = layui.jquery,
              layer=layui.layer;
          var goodsNum = $("#num").val();
          var goodsId = [[${goods.goodsId}]];
          var str="";
          for (let i = 0; i < 5; i++) {
              if($(".attr"+i).text()!=""){
                  if(str!=""){
                      str+=",";
                  }
                  //str+=$(".attr"+i).text();
                  str+=$(".mybtn"+i+".active").text();
              }
          }
          $.ajax({
              url: "/addShopCart",
              // 请求类型
              type: "GET",
              data:{
                  "goodsId":goodsId,
                  "goodsNum":goodsNum,
                  "attributes":str
              },
              // 成功的回调
              success: function (res) {
                  if(res=="true"){
                      layer.msg('添加购物车成功');
                  }else {
                      layer.msg("添加购物车失败");
                  }
              }
          });



          //active  选中状态的类
      })

  }

    //wang
    //购买
    function pay(){

        layui.use(['jquery','layer'],function (jquery) {
            var $ = layui.jquery,
                layer=layui.layer;
            var goodsNum = $("#num").val();
            var goodsId = [[${goods.goodsId}]];
            var str="";
            for (let i = 0; i < 5; i++) {
                if($(".attr"+i).text()!=""){
                    if(str!=""){
                        str+=",";
                    }
                    //str+=$(".attr"+i).text();
                    str+=$(".mybtn"+i+".active").text();
                }
            }
            $.ajax({
                url: "/pay",
                // 请求类型
                type: "POST",
                data:{
                    "goodsId":goodsId,
                    "goodsNum":goodsNum,
                    "attributes":str
                },
                // 成功的回调
                // success: function (res) {
                //     if(res=="true"){
                //         layer.msg('添加购物车成功');
                //     }else {
                //         layer.msg("添加购物车失败");
                //     }
                // }
            });



            //active  选中状态的类
        })

    }

  //谢安建
  //点击属性的时候添加选中的状态
  function selected(attribute){
      layui.use(['jquery','carousel'],function () {
          var $ = layui.jquery

          $("."+attribute.classList[1]).removeClass("active");
          $(attribute).toggleClass("active");
      })
  }


</script>


</body>
</html>